//console.log('那我');
//目的：改webpack入口文件，从默认的index.js改成src下的main.js

//https://webpack.docschina.org/concepts/#entry
//在webpack_config文件夹下新建webpack.config.js
// 把
// module.exports = {
//     entry: './path/to/my/entry/file.js',
// };
// 复制进去
//然后把entry目录换成./src/main.js    entry是入口
//然后把webpack_config下的package.json文件中新加一项
// "scripts": {
// 	"build": "webpack"
// }
//然后去用yarn build打包代码



//隔行变色案例：
import $ from 'jquery'//引入jquery
$('#myUL li:odd').css('color', 'yellow')//选中所有奇数的li
$('#myUL li:even').css('color', 'green')//选中所有偶数的li
//首先下载jquery：
//执行：yarn add jquery
//会再package.json下多出一项：
// "dependencies": {
//     "jquery": "^3.6.1"
// }
//写好main.js中的代码：
// import $ from 'jquery'//引入jquery
// $('#myUL li:odd').css('color', 'yellow')//选中所有奇数的li
// $('#myUL li:even').css('color', 'green')//选中所有偶数的li
//然后打包执行yarn build 
//则会再bundle.js里出现很多代码，因为把jquery也引入了
//把src下的index.js移动到dist里(原index.js文件不动)
//再在dist里的index.js增加一行代码：
//  <script src="./bundle.js"></script>
//此时可在网页里打开index.html看效果

//安装webpack plugin    yarn add html-webpack-plugin -D


//现在想把index.html中小li前面的小点去掉
//先再css的index.css里写好list-style:none
//然后再main.js中引入index.css:
import './css/index.css'
//此时若直接yarn build会失败
//因为webpack认识js和json，不认识css，所以要装css-loader
//https://webpack.docschina.org/loaders/css-loader#root
//yarn load css-loader -D
//后在webpack.config.js的plugins平级下面新增一项：
// module: {
//     rules: [ 
//       {
//         test: /\.css$/i,         
//         use: ["style-loader", "css-loader"],
//       },
//     ],
// },
//再运行yarn build
//此时再去看dist下的index.html中li前面的小点都不见了


//现在又想要字体变大，但是这次是写再less下的index.less文件中的
//先再index.less里写好样式然后在main.js中导入：
import './less/index.less'
//此时若直接yarn build会失败
//因为webpack认识js和json，不认识less，所以要装less-loader：
//https://webpack.docschina.org/loaders/less-loader#root
//yarn less less-loader -D
//后在webpack.config.js的moduleded的rules里新增一个数组：
// {
//     test: /\.less$/i,
//     use: ['style-loader','css-loader','less-loader',
//     ],
// },
//再运行yarn build
//此时再去看dist下的index.html字体大小变大了

//现在想插入图片
//需要在webpack.config.js中的module中的rules里再加入一个数组元素：
// {
//     test: /\.(png|jpg|gif|jepg)$/i,
//     //asset模式会把小于8kb的图片转化为base64
//     //把大于8kb的图片原图输出
//     type: 'asset'
//   }
const img1=document.createElement('img')
import logo from './assets/logo_small.png'
img1.src=logo
document.body.appendChild(img1)
//然后yarn build可以在dist里的index.html里看到图片
//是以base64的形式(字符串)被导入到dist下的index.html中
//因为是字符串所以网页加载更快，而下面的这种是要发送请求的
//图片与base64转换的网站：  mf2cn/img2base64/


//刚才是插入小图片，现在插入大图片
const img2=document.createElement('img')
import imgRun from './assets/1.gif'
img2.src=imgRun
document.body.appendChild(img2)
//这个图片大于8k则会直接以原图的方式放在了dist目录下，
//然后以绝地路径的方式被导入到dist下的index.html中


//现在要处理字体文件，字体图标
//在webpack.config.js里的module里的rules里
//加一个新的数组元素：
// {
//     test:/\.(eot|svg|ttf|woff|woff2)/i,
//     type:'asset/resource',
//     generator:{
//         filename:'font/[name].[hash:6][ext]'
//     }
// }
//然后main.js里写：
import './assets/fonts/iconfont.css'

const i1=document.createElement('i')
i1.className='iconfont icon-weixin'
document.body.appendChild(i1)
//执行yarn build  结果：
//dist下会新生成一个font文件里面有对应生成的
//每个文件，例如 iconfont.9cb43d.woff  中间6位就是hash：6


//现在要把高版本的js语言处理成低版本的js语言：
//在webpack.config.js里的module里的rules里再加入下面这个数组元素：
// {
//   test: /\.js$/i,
//   exclude: /(node_modules|bower_components)/,
//   use: {
//     loader: 'babel-loader',
//     options: {
//       presets: ['@babel/preset-env']
//     }
//   }
// }
//然后在main.js写下面的代码
const fff=()=>{
    console.log('睡不好');
}
console.log(fff);
//运行yarn build
//结果在dist下的index.html里检查console
// ƒ (){console.log("睡不好")}
//可见箭头函数已经被转化成普通函数了


//安装webpack-dev-server：
//yarn add webpack-dev-server -D
//因为每次改动代码后都要自己手动打包，
//安装了webpack-dev-server就不需要了
//然后再package.json里的"scripts"里新增一项：
//"serve":"webpack serve"表示启动开发服务器
//然后执行yarn serve
//可见跑在http://localhost:8080/上
//按住Ctrl再点这个网址可以直接打开
//去验证下，随便修改下public里index.html的一些内容
//然后去看网页有没有变化
//然后这里的8080端口号也是可以改的：
//再webpack.config.js里module.exports的mode下面(与mode同级)
//写：
// devServer:{
//     port:3333,
// },
//再执行yarn serve  则端口号变为3333了
//http://localhost:3333/


// 导入所有包(依赖)
// npm i对应过来就是yarn
// 在全局安装一个包，这个包是vue的脚手架：
// npm i @vue/cli -g
// 如何判断安装成功与否
// vue -V  (横杠后面是大写的V)



//nrm use taobao切换淘宝